<script setup lang="ts">
import {
  Tabs,
  TabPane,
  Form,
  FormItem,
  Button,
  Input,
  InputPassword,
} from "ant-design-vue";
import { computed, reactive, ref } from "vue";
import { useCountDown } from "@/utils/validUse";
import { notify } from "@/utils/anted";

const { start, formatTime } = useCountDown();

interface FormState {
  username: string;
  password: string;
  passwordConfirm: string;
  phone: number | string;
  code: number | string;
}
const formState = reactive<FormState>({
  username: "",
  password: "",
  passwordConfirm: "",
  phone: "",
  code: "",
});
const codeActive = ref(false);
const labelCol = ref({ style: { width: "80px" } });
const onFinish = (values: any) => {
  console.log("Success:", values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
const disabled = computed(() => {
  return !(formState.username && formState.password);
});
const emit = defineEmits(["login"]);

const handleLogin = () => {
  emit("login");
};

const handleCode = () => {
  codeActive.value = false;
  notify("发送成功！", { type: "success" });
  start(1);
  setTimeout(() => {
    codeActive.value = true;
  }, 1000);
};
</script>
<template>
  <div class="w-100 mt-5">
    <div class="mb-5">注册</div>
    <Form
      :model="formState"
      name="normal_login"
      class="login-form"
      :label-col="labelCol"
      labelAlign="left"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <FormItem
        label="账号"
        name="username"
        :rules="[{ required: true, message: '请输入账号!' }]"
      >
        <Input v-model:value="formState.username">
          <template #prefix>
            <svgIcon name="ant-UserOutlined" color="#3B82F6" />
          </template>
        </Input>
      </FormItem>

      <FormItem
        label="密码"
        name="password"
        :rules="[{ required: true, message: '请输入密码!' }]"
      >
        <InputPassword v-model:value="formState.password">
          <template #prefix>
            <svgIcon name="ant-LockOutlined" color="#3B82F6" />
          </template>
        </InputPassword>
      </FormItem>
      <FormItem
        label="确认密码"
        name="passwordConfirm"
        :rules="[{ required: true, message: '请再次输入密码!' }]"
      >
        <InputPassword v-model:value="formState.passwordConfirm">
          <template #prefix>
            <svgIcon name="ant-LockOutlined" color="#3B82F6" />
          </template>
        </InputPassword>
      </FormItem>
      <FormItem
        label="手机号"
        name="phone"
        :rules="[{ required: true, message: '请输入手机号!' }]"
      >
        <Input v-model:value="formState.phone">
          <template #prefix>
            <svgIcon name="ant-PhoneOutlined" color="#3B82F6" />
          </template>
        </Input>
      </FormItem>
      <FormItem
        label="验证码"
        name="code"
        :rules="[{ required: true, message: '请输入验证码!' }]"
      >
        <div class="flex">
          <Input v-model:value="formState.code">
            <template #prefix>
              <svgIcon name="ant-MailOutlined" color="#3B82F6" />
            </template>
          </Input>
          <div>
            <Button class="ml-2 w-30" v-if="!codeActive" @click="handleCode"
              >获取验证码</Button
            >
            <Button class="ml-2 w-30" disabled v-else>
              {{ formatTime }}
            </Button>
          </div>
        </div>
      </FormItem>
      <FormItem>
        <div class="flex justify-between items-center">
          <Button
            :disabled="disabled"
            class="w-60"
            type="primary"
            html-type="submit"
          >
            注册
          </Button>
          <div>
            <a class="cursor-pointer text-blue-500" @click="handleLogin"
              >已有账号登录</a
            >
          </div>
        </div>
      </FormItem>
    </Form>
  </div>
</template>
<style scoped lang="less"></style>
